<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .active {
            color: skyblue;
        }
        
        .text-danger {
            font-size: 30px;
        }
    </style>
    <title>02v-bind给html标签属性绑定</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="link">
        <!-- 给html标签属性绑定v-bind -->
        <a v-bind:href="link" target="_blank">跳转到：{{link}}</a>
        <br>
        <!-- 动态调整class,可以简写:style -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}">动态调整class</span>
        <br>
        <span :style="{color: color1,fontSize: fontSize}">你好</span>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                link: 'https://www.baidu.com/',
                isActive: true,
                hasError: true,
                fontSize: '30px',
                color1: 'red'
            },
            methods: {

            },
        })
    </script>
</body>

</html>